<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<%--
  Created by IntelliJ IDEA.
  User: LV
  Date: 2016/6/30
  Time: 15:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>商品信息</title>
    <link rel="stylesheet" href="${ctx}/assets/webuploader-0.1.5/webuploader.css">
    <script src="${ctx}/assets/webuploader-0.1.5/webuploader.js"></script>
    <script>
        $(function($){
            //填充省份下拉选
            $.getJSON("${ctx}/areas/getAreasList/null", function(json){
                //alert("JSON Data: " +json);
                //alert(json.length);
                for(var i in json){
                    //alert(json[i].areaName);
                    //回显省市选项
                    if($("#pco").val()==json[i].areaCode){
                        $("#province").append("<option value='"+json[i].areaCode+"' selected='selected'>"+json[i].areaName+"</option>");
                        //填充发货地省市名
                        $("#addrProvinceName").val($("#province option:selected").text());
                        $("#city option").remove();
                        $("#city").append("<option value='0'>"+"请选择发货城市"+"</option>");
                        var selectTmp=$("#province").val();
                        if(selectTmp!=0){
                            $.getJSON("${ctx}/areas/getAreasList/"+selectTmp, function(json){
                                for(var i in json){
                                    //alert(json[i].areaName);
                                    if($("#cco").val()==json[i].areaCode){
                                        $("#city").append("<option value='"+json[i].areaCode+"' selected='selected'>"+json[i].areaName+"</option>");
                                        //填充市级名
                                        $("#addrCityName").val($("#city option:selected").text());
                                    }
                                    else
                                    $("#city").append("<option value='"+json[i].areaCode+"'>"+json[i].areaName+"</option>");
                                }
                            });
                        }
                    }
                    else
                    $("#province").append("<option value='"+json[i].areaCode+"'>"+json[i].areaName+"</option>");
                }
            });
            //省份发生改变时，填充市级下拉选
            $("#province").change(function () {
                //填充发货地省市名
                $("#addrProvinceName").val($("#province option:selected").text());
                $("#city option").remove();
                $("#city").append("<option value='0'>"+"请选择发货城市"+"</option>");
                var selectTmp=$("#province").val();
                if(selectTmp!=0){
                    $.getJSON("${ctx}/areas/getAreasList/"+selectTmp, function(json){
                        for(var i in json){
                            //alert(json[i].areaName);
                            $("#city").append("<option value='"+json[i].areaCode+"'>"+json[i].areaName+"</option>");
                        }
                    });
                }
            });
            //市发生改变时
            $("#city").change(function () {
                //填充市级名
                $("#addrCityName").val($("#city option:selected").text());
            });

            //填充商店分类下拉选
            $.getJSON("${ctx}/shop/getShopCategoryList", function(json){
                //alert("JSON Data: " +json);
                //alert(json.length);
                for(var i in json){
                    //alert(json[i].areaName);
//                    alert($("#wxsi").val());
                    if($("#wxsi").val()==json[i].categoryId)
                        $("#shop_category").append("<option value='"+json[i].categoryId+"' selected='selected'>"+json[i].categoryName+"</option>");
                    else
                        $("#shop_category").append("<option value='"+json[i].categoryId+"'>"+json[i].categoryName+"</option>");
                }
            });

            //给id为form_submit添加提交动作
            $("#form_submit").click(function(){
//                alert("提交动作");
                $("#product_form").submit();
            });
        });

    </script>
    <script>
        $(function(){
            var $ = jQuery, $list = $('#fileList'),
            // 优化retina, 在retina下这个值是2
                    ratio = window.devicePixelRatio || 1,

            // 缩略图大小
                    thumbnailWidth = 120 * ratio, thumbnailHeight = 120 * ratio,

            // Web Uploader实例
                    uploader,
                    $imgurls = $("#imgurls");


            // 初始化Web Uploader
            uploader = WebUploader.create({

                // 选完文件后，是否自动上传。
                auto: true,

                // swf文件路径
                swf: '${ctx}/assets/webuploader-0.1.5/Uploader.swf',

                // 文件接收服务端。
                server: '${ctx}/file_upload?dir=image',

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker',

                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });

            // 当有文件被添加进队列的时候
            /*uploader.on( 'fileQueued', function( file ) {
             $list.append( '<div id="' + file.id + '" class="item">' +
             '<h4 class="info">' + file.name + '</h4>' +
             '<p class="state">等待上传...</p>' +
             '</div>' );
             });*/
            // 当有文件添加进来的时候
            uploader.on('fileQueued', function (file) {
                var $li = $('<div id="' + file.id + '" class="file-item thumbnail">'
                        + '<i class="remove_pic"  pic="' + file.id +'">&times;</i><img width="120px" />'
                        + '</div>'), $img = $li.find('img');
//                var $li = $('')

                $list.append($li);

                //给删除图片绑定单机事件，让它可以执行删除
                $("#"+file.id).children(".remove_pic").bind("click",function () {
                    $("#"+file.id).children().empty();
                    $("#"+file.id).remove();
                    uploader.removeFile(file.id,true);//将其从队列中移除
                });

                // 创建缩略图
                uploader.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }

                    $img.attr('src', src);
                }, thumbnailWidth, thumbnailHeight);
            });



            // 文件上传过程中创建进度条实时显示。
            uploader.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '#'+file.id ),
                        $percent = $li.find('.progress .progress-bar');

                // 避免重复创建
                if ( !$percent.length ) {
                    $percent = $('<div class="progress progress-striped active">' +
                            '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                            '</div>' +
                            '</div>').appendTo( $li ).find('.progress-bar');
                }

                $li.find('p.state').text('上传中');

                $percent.css( 'width', percentage * 100 + '%' );
            });


            uploader.on( 'uploadSuccess', function( file ) {
                $( '#'+file.id ).find('p.state').text('已上传');
            });

            uploader.on( 'uploadError', function( file ) {
                $( '#'+file.id ).find('p.state').text('上传出错');
            });

            uploader.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').fadeOut();
            });

            uploader.on('uploadAccept', function (file, response) {
//            console.log($('#' + file.id).html());
//            console.log($.toJSON(response));
                if (response.error == 1) {
                    // 通过return false来告诉组件，此文件上传有错。
                    return false;
                } else {
//                    var img_url = response.url;
//                    alert(img_url);
//                    $imgurls.append('<input type="hidden" pic="' + file.file.id + '" name="productImgs" value="'+response.url+'">');
                    $list.children("#"+file.file.id).append('<input type="hidden" pic="' + file.file.id + '" name="productImgs" value="'+response.url+'">');
                   //alert(file.file.id);
                }
            });

            //delete
            /*$(".remove_pic").bind("click",function(){
             var picid = $(this).attr("pic");
             alert(picid);
             });*/
        })

    </script>

    <script>
           //删除图片
           function removePic(object) {
                var $pa=$(object).parent();
                $pa.children().empty();
                $pa.remove();
           }
    </script>


</head>
<body>
<div class="navigation">
    <div class="crumbs ">
        <i class="tm-iconfont icon-info"></i>
        <a href="//mai.taobao.com/seller_admin.htm">卖家中心</a><span>&gt;</span><a href="#200">商品管理</a><span>&gt;</span>发布商品
    </div>
    <div class="help">
        <a href="#" target="_blank">卖家交易学习专区</a>
    </div>
</div>
<div class="goods_release line-all">
    <div class="gc_tip p-lr20 h40 line-bottom">
        类目信息：<c:forEach items="${categoryNames}" var="cName">
        <a>${cName}</a>>
    </c:forEach>

    </div>
    <form:form modelAttribute="unityFormatModel" action="${ctx}/product/savingEditProduct" method="post" id="product_form">
        <form>
            <input type="hidden" name="productId" value="${product.productId}"/>
            <input type="hidden" name="categoryId" value="${product.pCategoryCategoryId}"/>
            <div class="re_content p-tb20">
                <div class="u_tableform p-lr20">
                    <div class="item">
                        <label class="label">商品标题：<span>*</span></label>
                        <div class="cont_txt">
                            <input name="productName" class="text" style="width:400px;" value="${product.productName}"/>
                        </div>
                        <span class="tip" style="color: red"><form:errors path="productName"/></span>
                    </div>
                    <div class="item">
                        <label class="label">店铺分类：</label>
                        <div class="cont_txt">
                            <input type="hidden" value="${product.wxShopCategoryId}" id="wxsi"/>
                            <select class="text w172" id="shop_category" name="shopCategoryId">
                                <option value="">请选择店铺分类</option>
                            </select>
                        </div>
                    </div>
                    <div class="item">
                        <label class="label">商品图片：<span>*</span></label>
                        <div class="cont_txt">
                            <p class="c-FF0000">提示：最多允许6张产品图片，产品图片规格为1:1 建议图片像素800*800 文件大小500K以内。第一张图为主图</p>
                            <div id="imgurls"></div>
                            <div id="uploader-demo" class="p-tb10 line-all oh b-F4F4F4">
                                <div id="fileList" class="uploader-list upload_A">
                                        <c:forEach items="${imgs}" var="img">
                                            <div class="file-item thumbnail">
                                                <i class="remove_pic"  onclick="removePic(this)">×</i>
                                                <img width="120px" height="120px" src="${img}"/>
                                                <input type="hidden" name="productImgs" value="${img}">
                                            </div>
                                        </c:forEach>
                                </div>
                                <div id="filePicker">选择图片</div>
                            </div>

                            <%--<div class="p-tb10 line-all oh b-F4F4F4">--%>
                                <%--<ul class="upload_A">--%>

                                    <%--<li>--%>
                                        <%--<input id="myfile1" type="file" style="display:none" name="productImgs"/>--%>
                                        <%--<a href="javascript:document.getElementById('myfile1').click()"></a>--%>
                                        <%--<div class="list">--%>
                                            <%--<div class="ith_img2 usernane_img120"><span></span></div>--%>
                                        <%--</div>--%>
                                    <%--</li>--%>
                                    <%--<li>--%>
                                        <%--<input id="myfile2" type="file" style="display:none" name="productImgs"/>--%>
                                        <%--<a href="javascript:document.getElementById('myfile2').click()"></a>--%>
                                        <%--<div class="list">--%>
                                            <%--<div class="ith_img2 usernane_img120"><span></span></div>--%>
                                        <%--</div>--%>
                                    <%--</li>--%>
                                    <%--<li>--%>
                                        <%--<input id="myfile3" type="file" style="display:none" name="productImgs"/>--%>
                                        <%--<a href="javascript:document.getElementById('myfile3').click()"></a>--%>
                                        <%--<div class="list">--%>
                                            <%--<div class="ith_img2 usernane_img120"><span></span></div>--%>
                                        <%--</div>--%>
                                    <%--</li>--%>
                                    <%--<li>--%>
                                        <%--<input id="myfile4" type="file" style="display:none" name="productImgs"/>--%>
                                        <%--<a href="javascript:document.getElementById('myfile4').click()"></a>--%>
                                        <%--<div class="list">--%>
                                            <%--<div class="ith_img2 usernane_img120"><span></span></div>--%>
                                        <%--</div>--%>
                                    <%--</li>--%>
                                    <%--<li>--%>
                                        <%--<input id="myfile5" type="file" style="display:none" name="productImgs"/>--%>
                                        <%--<a href="javascript:document.getElementById('myfile5').click()"></a>--%>
                                        <%--<div class="list">--%>
                                            <%--<div class="ith_img2 usernane_img120"><span></span></div>--%>
                                        <%--</div>--%>
                                    <%--</li>--%>
                                    <%--<li>--%>
                                        <%--<input id="myfile6" type="file" style="display:none" name="productImgs"/>--%>
                                        <%--<a href="javascript:javascript:document.getElementById('myfile6').click()"></a>--%>
                                        <%--<div class="list">--%>
                                            <%--<div class="ith_img2 usernane_img120"><span></span></div>--%>
                                        <%--</div>--%>
                                    <%--</li>--%>
                                <%--</ul>--%>
                            <%--</div>--%>
                        </div>
                        <span class="tip" style="color: red"><form:errors path="productImgs"/></span>
                    </div>
                    <div class="item">
                        <label class="label">商品规格：</label>
                        <div class="cont_txt">
                            <form id="form1" name="form1" method="post" action="">
                                <label class="p-r20"><input type="radio" name="RadioGroup1" value="统一规格" id="RadioGroup1_0" />统一规格</label>
                                <label><input type="radio" name="RadioGroup1" value="多规格" id="RadioGroup1_1" />多规格</label>
                            </form>
                        </div>
                    </div>
                    <div class="item">
                        <label class="label">微店价：<span>*</span></label>
                        <div class="cont_txt">
                            <input class="text w150" name="salePrice" value="${product.salePrice}"/><span class="p-l10">元</span>
                        </div>
                        <span class="tip" style="color: red"><form:errors path="salePrice"/></span>
                    </div>
                    <div class="item">
                        <label class="label">原价<em class="c-999999">(必填)</em>：</label>
                        <div class="cont_txt">
                            <input class="text w150" name="marketPrice" value="${product.marketPrice}"/><span class="p-l10">元</span>
                        </div>
                        <span class="tip" style="color: red"><form:errors path="marketPrice"/></span>
                    </div>
                    <div class="item">
                        <label class="label">商品库存：<span>*</span></label>
                        <div class="cont_txt">
                            <input class="text w150" name="inventoryNum" value="${product.inventoryNum}"/><span class="p-l10">件</span>
                        </div>
                        <span class="tip" style="color: red"><form:errors path="inventoryNum"/></span>
                    </div>
                    <div class="item">
                        <label class="label">商品条码：</label>
                        <div class="cont_txt">
                            <input class="text w150" name="productCode" value="${product.productCode}"/>
                        </div>
                        <span class="tip">（选填）</span>
                    </div>
                    <div class="item">
                        <label class="label">商品详情：<span>*</span></label>
                        <div class="cont_txt">
                            <textarea class="textarea m-t10" style="width:600px;" name="productDescription">${product.productDescription}</textarea>
                        </div>
                        <span class="tip" style="color: red"><form:errors path="productDescription"/></span>
                    </div>
                    <div class="item line-bottom m-b10">
                        <label class="label">物流信息</label>
                    </div>
                    <div class="item">
                        <label class="label tar">发货地：<span>*</span></label>
                        <div class="cont_txt">
                            <input type="hidden" value="${product.addrProvinceCode}" id="pco">
                            <input type="hidden" name="addrProvinceName" id="addrProvinceName"/>
                            <select class="text w172 m-r10" id="province" name="addrProvinceCode">
                                <option value="0">请选择发货省份</option>
                            </select>
                            <input type="hidden" value="${product.addrCityCode}" id="cco">
                            <input type="hidden" name="addrCityName" id="addrCityName"/>
                            <select class="text w172" id="city" name="addrCityCode">
                                <option value="0">请选择发货城市</option>
                            </select>
                        </div>
                        <span class="tip" style="color: red"><form:errors path="addrProvinceCode"/></span>
                        <span class="tip" style="color: red"><form:errors path="addrCityCode"/></span>
                    </div>
                    <div class="item">
                        <label class="label tar">运费：<span>*</span></label>
                        <div class="cont_txt">
                            <input class="text w150" value="${product.freight}" name="freight"/><span class="p-l10">元</span>
                        </div>
                        <span class="tip" style="color: red"><form:errors path="freight"/></span>
                    </div>
                </div>
            </div>
        </form>
    </form:form>
</div>

<div class="tac p-t40">
    <button id="form_submit" class="i_btn u2">提交商品修改</button>
    <div style="padding-bottom:100px; height:10px;"></div>
</div>
</body>
</html>
